<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室应用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div id="box">
     <section id="shader" @click="close" v-show="showMembers">
          <section id="memberList" :style="{right:memberListOffset}">
              <header class="header">当前成员({{memberList.length}})</header>
              <ul>
                  <li v-for="member in memberList">
                      <div class="u-item" v-on:click.stop="clickUser(member.id)">
                          <img class="icon" :src="getUserAvatarById(member.id)">
                          <span class="name" :class="{ban:member.banNum == roomId}">{{getUserNameById(member.id)}}</span>
                      </div>
                  </li>
              </ul>
          </section>
      </section>
      <section id="up">
          <section class="header">
              聊天室
              <select style="font-size: 20px;" v-model="roomId" :disabled="isMyAdmin">
                  <option value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
              </select>
              号
              <img class="icon" src="./img/menu.png" alt="" @click="open">
          </section>
          <section id="chatList">
              <ul>
                  <li v-for="chatItem in normalMsgList">

                      <div class="chat-item" :class="{left:!isMineMsg(chatItem.sender),right:isMineMsg(chatItem.sender)}">
                          <img class="avatar" :src="getUserAvatarById(chatItem.sender)" alt="">
                          <span class="name">{{getUserNameById(chatItem.sender)}}</span>
                          <div class="content-box left">
                              <span class="arror"></span>
                              <div class="content">
                                  {{chatItem.content}}
                                  <div class="arror-helper"></div>
                              </div>
                          </div>
                      </div>
                  </li>
              </ul>
          </section>
      </section>

      <section id="down">
          <textarea v-model="content" placeholder="说点什么吧..." :disabled="amIBan"></textarea>
          <section class="sendBtnBox">
              <button @click="sendMsg" :disabled="amIBan">{{amIBan?'被禁言中':'发送'}}</button>
          </section>
      </section>

  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/layer_mobile/layer.js"></script>
<script src="js/bmob-min.js"></script>
<script src="js/tools.js"></script>
<script src="js/Dao.js"></script>
<script src="js/Room.js"></script>
<script src="js/index.js"></script>
</html>